{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <meta charset="utf-8">
    <title>10086购票系统</title>
        <style>
            .Home_page
            {
                position:relative;
                height:300px;
                margin:0px 0px 0px 0px;
                width:100%
            }
        </style>
    <link rel="stylesheet" type="text/css" href="{% static 'tickets/CSS/Initial.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'tickets/CSS/Carousel.css' %}">
</head>

<body >
    <div class="top">
        <div class="top_picture" align="center">
			<img src="{% static 'tickets/images/12306.png' %}"  alt="Logo">
		</div>
        {% if user_acut %} 
            <div class="login_block">
                已登录：{{ user_acut }}<br/>
            </div>
        {% else %}
            <div class="login_block">
                <ul>
                    <li><a href="{% url 'tickets:login' %}">登录</a></li>
                    <li><a href="{% url 'tickets:login' %}">注册</a></li>
                </ul>
            </div>
        {% endif %}
    </div>

	<div class="nav" align="center">
        <ul>
            <li class="selected"><a href="{% url 'tickets:guide' %}">首页</a></li>
            <li><a href="{% url 'tickets:guide' %}">出行指南</a></li>
            <li><a href="">个人信息</a></li>
            <li><a href="{% url 'tickets:guide' %}">购票规则</a></li>
        </ul>
	</div>

	<div class="container" align="left">
        <ul class="parent" style="left:0px;">
            <li><img src="https://www.12306.cn/index/images/pic/banner0619.jpg"></li>
            <li><img src="https://www.12306.cn/index/images/pic/banner10.jpg"></li>
            <li><img src="https://www.12306.cn/index/images/pic/banner12.jpg"></li>
            <li><img src="https://www.12306.cn/index/images/pic/banner20200707.jpg"></li>
            <li><img src="https://www.12306.cn/index/images/pic/banner20201223.jpg"></li>
        </ul>

        <div class="btnLeft">&lt;</div>
        <div class="btnRight">&gt;</div>
        <div class="modal">
            <div class="dots">
                <ul class="clearfix">
                    <li class="on"></li>
                    <li class="off"></li>
                    <li class="off"></li>
                    <li class="off"></li>
                    <li class="off"></li>
                </ul>
            </div>
        </div>
		<div class="input_search">
        <!-- <img src="图片/0.png" id="GIF" height="100%" width="100%" style="z-index=8888">-->
        <!--发送数据接口-->
            <form action="/tickets/query" method="POST">
                {% csrf_token %}
                <div align="center">
                <br><br><br>
                <b><font size="4" style="color:greenyellow">出发站：	</font></b>
                <input type="text" name="station_start" value="" >
                <br><br>
                <b><font size="4" style="color:greenyellow">终点站：	</font></b>
                <input type="text" name="station_arriv" value="" >
                <br><br>
                <b><font size="4" style="position:relative; right: 12px; color:greenyellow">时间:</font></b>
                <input type="date" style="width: 125px;" id="train_time" name="tran_date">
                <br><br><br>
                <button style="width: 100px;" class="btn_search">查询</button>
            </form>
        </div>
    </div>

    <script type="text/javascript">
        var date = new Date();
        var dateString;
        if (date.getMonth()<10)
            dateString = date.getFullYear() + "-0" + (date.getMonth() + 1) + "-" + date.getDate();
        else
            dateString = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
        document.getElementById("train_time").value=dateString;

        var imgShow = document.getElementsByClassName('parent')[0],
            dotList = document.querySelectorAll('.dots >.clearfix > li');
        var btnLeft = document.getElementsByClassName('btnLeft')[0],
            btnRight = document.getElementsByClassName('btnRight')[0];
        var dotLen = dotList.length,
            index = 0; //轮播层的图片索引，0表示第一张

        //圆点显示
        function showRadius() {
            for(var i = 0; i < dotLen; i++) {
                if(dotList[i].className === "on"){
                    dotList[i].className = "off";
                }
            }
            index++;
            if(index===5)
            index=0;
            dotList[index].className = "on";

        }
        function sleep (time) {
        return new Promise((resolve) => setTimeout(resolve, time));
        }

        function animate(element,distance){
                clearInterval(element.timer)
                element.timer=setInterval(function(){
                    var present=parseInt(element.style.left);//获取元素的当前的位置
                    var movement=50;//每次移动的距离
                    movement=present<distance?movement:-movement;    
                    present+=movement;//当前移动到位置
                    if(Math.abs(present-distance)>Math.abs(movement)){
                        element.style.left=present+"px"
                    }else{
                        clearInterval(element.timer);
                        element.style.left=distance+"px"			
                    }
                    //调试
                    /*console.log("movement="+movement);
                    console.log("distance="+distance);
                    console.log("present="+present);*/
                },10);
        }

        // 自动轮播
        var timer;
        function autoPlay() {
            timer = setInterval(function() {
                var right;
                var imgLeft = imgShow.style.left;
                var Left_int=parseInt(imgLeft);
                var yu=Left_int%1500;
                Left_int=Left_int-yu;
                console.log("Left_int="+Left_int);
                if(Left_int<=-6000)
                {
                    right = 0;
                    imgShow.style.left = right + "px";
                }
                /*if(imgLeft === "-6000px") {
                    right = 0;
                    imgShow.style.left = right + "px";
                }*/
                else{
                    right = Left_int - 1500;
                    /*right = parseInt(imgLeft);
                    for(var j=0;j<15;j++)
                    {
                    right=right-100;
                    imgShow.style.left = right + "px";
                    
                    }*/
                    animate(imgShow,right);
                    console.log("right="+right);
                    //animate(imgShow,right);
                }
                //imgShow.style.left = right + "px";
                //$("#img").animate({left: imgLeft});
                
                
            showRadius();
            } ,4000)
        }
        autoPlay();

        for(var i = 0; i < dotLen; i++) {
            //利用闭包传递索引
            (function(i) {
                dotList[i].onclick = function() {
                    var dis = index - i; //当前位置和点击的距离
                    imgShow.style.left = (parseInt(imgShow.style.left) + dis * 1500) + "px";
                    index = i; //显示当前位置的圆点
                    index--;
                    showRadius();
                }
            })(i);
        }

        function Sleep() {
            time = setInterval(function(){},6000);
            autoPlay();
        }
        var mutex=0;
        function animate2(element,distance){
            if(mutex===0){
                mutex=1;
                clearInterval(element.timer)
                element.timer=setInterval(function(){
                    var present=parseInt(element.style.left);//获取元素的当前的位置
                    var movement=50;//每次移动的距离
                    movement=present<distance?movement:-movement;    
                    present+=movement;//当前移动到位置
                    if(Math.abs(present-distance)>Math.abs(movement)){
                        element.style.left=present+"px"
                    }else{
                        clearInterval(element.timer);
                        element.style.left=distance+"px"
                        mutex=0;
                    }
                    //调试
                    /*console.log("movement="+movement);
                    console.log("distance="+distance);
                    console.log("present="+present);*/
                },10);
                
                //console.log(present);
            }
            }



        //向左移动
        btnLeft.onclick = function() {
            index--;
            
            if(index < 0){  /*第1张向左时，变为第5张*/
                index = 4;
            }
            index--;
            showRadius();
            var left;
            var imgLeft = imgShow.style.left;
            if(imgLeft === "0px") { /*当是第1张时，每张图片左移，移4张图，位置为-(4*1500)*/
                left = -6000;
                imgShow.style.left = left + "px";
            }
            else{
                left=-1500*index; /*由于left为负数，每左移一张加1500*/
                animate2(imgShow,left);
            }
            clearInterval(timer);
            Sleep();
            clearInterval(time);
            //autoPlay();
        }

        //向右移动
        btnRight.onclick = function() {
            index++;
            if(index > 4){  /*第5张向右时，变为第1张*/
                index = 0;
            }
            index--;
            showRadius();
            var right;
            var imgLeft = imgShow.style.left;
            if(imgLeft === "-6000px") { /*当是第5张时，第1张的位置为0*/
                right = 0;
                imgShow.style.left = right + "px";
            }
            else{
                //right = parseInt(imgLeft) - 1500; /*由于left为负数，每右移一张减1500*/
                right=-1500*index;
                animate2(imgShow,right);
            }
            clearInterval(timer);
            Sleep();
            clearInterval(time);
        }

        var index2=0;
        var counter=0;
        var flag=0;
    </script>
</body>
</html>